import React from 'react';
import { browserHistory } from 'react-router';
// 引入Antd的导航组件
import { Icon, Layout, Carousel, notification, BackTop,Input,Button } from 'antd';
// const SubMenu = Menu.SubMenu;
const { Header, Content, Footer, Sider } = Layout;
import * as actions from './../../actions/frontEnd/homeAction';
import Sidebar from './../../pages/frontEnd/Sidebar';
import TableView from './../backstage/TableView';

export default class index extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        carouselData: [],
        typeData: [],
        productList: [],
        mustCheckOutList: [],
        isShowTypeList: false, //true: Type List, false: 首页列表
        selectType: -1,
        totalPageNum: 0,
        findParents: GLOBAL.baseURL + "/webAPI/home/unAuth/findProductsByConditions",
        serviceData: [],
        searchObject: {},
        iptProductName: "",
          array:["成为会员  :" +
          "如果您已经拥有帐号，请登录即可购买心仪的物品\n" +
          "如果您还没有帐号，请点击“注册”，成功后即可成为我们的会员。",

              "登录  -  体验购物  -  确认购物车清单  -  处理付款  - 付款成功  -  确认订单  -  处理发货  .\n" +
              "\n" ,


              "国际配送\n" +
              "\n" +
              "- 暂时还未提供此项服务，尽快加步 ",

              "邮箱：shop@frobagroup.com",


              "商务合作 ： " +
              "畐尔巴网页积极开拓市场，也并且将和供应商携手搜罗更多元化的商品，提供最佳贴心服务给予客户。于此，我们将会期待与更多的品牌供应商共创三赢（供应商，本平台，及客户）\n" +
              "\n" +
              "品牌合作必备 ：\n" +
              "A . 申请入驻品牌的公司证明文件 （营业执照）\n" +
              "B . 申请入驻品牌的公司的背景介绍\n" +
              "C . 品牌历史及 品牌所收买的点（上线，下线）\n" +
              "D . 商品清单\n" +
              "  D1.1  商品报价\n" +
              "E. 最低订货量\n" +
              "     E1.1 最低订货额\n" +
              "注：更多资讯，请邮件至shop@frobagroup.com",


              "网站地图 ： \n" +
              "Jalan Tugu , Kampung Air , Kota Kinabalu , Sabah , Malaysia.",


              "我的账户 ：" +
              "客户会看见亲自的购物车，购物历史或以往所观看的商品",


              "正品保障： \n" +
              "畐尔巴网页将会从原料制作上，到厂家或代理商，供应商严选把关各个部门及保持合作关系，支持直接采购。为消费者提供100%可靠放心来源及品质保证。\n" +
              "\n" +
              " 1   为什么畐尔巴网页所卖的价格如此廉价 ？\n" +
              "店铺租金     节省 \n" +
              "店铺所有开销 及人员   节省\n" +
              "采购数量大  节省\n" +
              "畐尔巴将持续提供最短路，最节省的商品提供给予客户"
          ],
          arrayTitle:[
              "成为会员","订购服务程序","国际配送","联络我们","商务合作","网站地图","我的账户","正品保障"
          ],
          aHrefTitle:"",
          displayContact:"none",
          displayInformation:"none"
      };
    }
    componentDidMount() {
      var that = this;
      actions.findCarousels(this);
      actions.findExtensionProducts(this, {conditions:{setTopType: 'YES', status: 'active'}, pageNumber: 1, pageSize: 8});
      actions.findExtensionProducts(this, {conditions:{mustCheckOut: true, status: 'active'}, pageNumber: 1, pageSize: 5});

      window.onresize = function () {
        var height = document.body.clientHeight;
        var marginTop = (window.innerHeight - 210) + "px";

        $("#divContent").css({"height": height});
        $(".divFeekbook").css({"margin-top": marginTop});
      };
      window.onresize();
    }
    renderCarouselData(item, index){
      if(item.productId == undefined){
        return (<a key={index} href="javascript:void(0)">
          <div className="divBackground" style={{height: "350px", backgroundImage: "url(http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + item.pic + ")"}} title={item.describe}></div>
        </a>);
      }else {
        return (<a key={index} href={"/productDetail/" + item.productId}>
          <div className="divBackground" style={{height: "350px", backgroundImage: "url(http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + item.pic + ")"}} title={item.describe}></div>
        </a>);
      }
    }
    leftArrow(){
      this.slider.prev();
    }
    aHref(i){
        if(i==3){
            this.setState({
                displayContact:"block",
                displayInformation:"none"
            })
        }else{
            this.setState({
                displayContact:"none",
                displayInformation:"block"
            })
        }
        // this.state.aHrefInformation=this.state.array[i];
        this.setState({aHrefInformation: this.state.array[i]});
        this.setState({aHrefTitle: this.state.arrayTitle[i]});

    }
    rightArrow(){
      this.slider.next();
    }
    gotoProductDetail(id){
      browserHistory.push("/productDetail/" + id);
    }
    btnSearch(){
      this.state.searchObject.type = this.state.selectType;
      this.state.searchObject.productName = this.state.iptProductName;
      this.setState({isShowTypeList: true, searchObject: this.state.searchObject});
      this.refs["tableView"].refreshData();
    }
    inputChange(e){
      this.setState({iptProductName: e.target.value});
    }
    onKeyPress(e){
      if (e.charCode == 13){
        this.btnSearch();
      }
    }
    serchByType(type){
      if(type == -1){
        this.setState({isShowTypeList: false, selectType: -1});
      }else {
        this.state.searchObject.type = type;
        this.state.searchObject.productName = this.state.iptProductName;
        this.setState({isShowTypeList: true, selectType: type, searchObject: this.state.searchObject});
        this.refs["tableView"].refreshData();
      }
    }
    totalPageNum(num) {
        this.setState({
            totalPageNum: num
        })
    }
    getServiceData(data) {
        this.setState({
            serviceData: data
        });
    }
    serviceError(err){
        notification.error({
            placement: 'bottomRight',
            message: '提示你：',
            description: '对不起，网络错误，请稍候重试。',
            style: {
              borderLeft: '4px solid rgb(240, 70, 52)'
            }
        });
    }
    bindFrobalogo(){
        $(".ant-back-top").click();
    }
    renderItem(item, index) {
        var productPic = null;
        if(item.productPic == undefined){
          productPic = <img src="/src/styles/images/listDefault_Large.png" width="225" height="300" />
        }else {
          productPic = <img src={"http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + item.productPic} width="225" height="300" />
        }

        return (<li className="pop_deal_single" key={index} onClick={this.gotoProductDetail.bind(this, item.id)}>
          <div className="pic pic_hover">
            {productPic}
          </div>
          <div className="pop_deal_content">
            <p className="brand_name" title={item.productName + ((item.brandName)?"("+ item.brandName + ")":"")}>{item.productName + ((item.brandName)?"("+ item.brandName + ")":"")}</p>
            <a href="http://item.jumei.com/df1804256771280p4229988.html?from=kdn_0321p_pos_1_11&amp;status=zs" target="_blank" className="name_box" height="35">
              <span className="name" title={item.title}>{item.title}</span>
              <span className="saleinfos"></span>
            </a>
            <a href="http://item.jumei.com/df1804256771280p4229988.html?from=kdn_0321p_pos_1_11&amp;status=zs" target="_blank" className="zhe_box">
              <span className="num01">
                <em>¥</em>{item.discountPrice}</span><span className="num02">Rm{item.price}
              </span>
            </a>
          </div>
        </li>);
    }
    gotoSearchType(type){
      var that = this;
      this.setState({selectType: parseInt(type), isShowTypeList: true}, function(){
        that.serchByType(parseInt(type));
      });
    }
    render() {
      var divCarouselArrowLeft = null; var divCarouselArrowRight = null; var serverList = null;
      if(this.state.carouselData.length >= 2){
        divCarouselArrowLeft = <div className="divCarouselArrow" style={{width: '64px', display: (this.state.isShowTypeList == false)?"block":"none"}}>
          <img src="/src/styles/images/left.png" onClick={this.leftArrow.bind(this)} className="imgLeftArrow"/>
        </div>

        divCarouselArrowRight = <div className="divCarouselArrow" style={{top: '-276px', left: '20px', float: 'right', width: '64px', display: (this.state.isShowTypeList == false)?"block":"none"}}>
          <img src="/src/styles/images/right.png" onClick={this.rightArrow.bind(this)} className="imgRightArrow"/>
        </div>
      }
      if(this.state.serviceData.length != 0){

          serverList = <ul className="act_product_ul" style={{marginBottom: '20px', display: 'flex', flexWrap: 'wrap', width: '1200px', marginTop: '64px'}}>
            {
                this.state.serviceData.map((item, index) => {
                    return this.renderItem(item, index);
                })
            }
          </ul>

      }else{
          serverList = <div className="divEmptyData" style={{marginLeft: 'auto', marginRight: 'auto', width: '1070px', marginTop: '64px'}}>对不起，没有相关商品。</div>
      }
        const { TextArea } = Input;
      return (

          <div id="divWebContent">
            <div className="divSearch">
              <img src="/src/styles/images/frobalogo.png" />
              <div className="divInput">
                <input type="input" placeholder="请输入产品名..." onKeyPress={this.onKeyPress.bind(this)} onChange={this.inputChange.bind(this)} className="txtInput"/>
                <button className="btnSearch" onClick={this.btnSearch.bind(this)}>搜索</button>
              </div>
            </div>
            <div className="header_bottom">
              <div className="header_center">
                <div className={(this.state.selectType == -1)?"divItemOver":"divItem"} onClick={this.serchByType.bind(this, -1)}>首页</div>
                <div className={(this.state.selectType == 1)?"divItemOver":"divItem"} onClick={this.serchByType.bind(this, 1)}>推荐品牌</div>
                <div className={(this.state.selectType == 2)?"divItemOver":"divItem"} onClick={this.serchByType.bind(this, 2)}>女孩护肤</div>
                <div className={(this.state.selectType == 3)?"divItemOver":"divItem"} onClick={this.serchByType.bind(this, 3)}>面膜</div>
                <div className={(this.state.selectType == 4)?"divItemOver":"divItem"} onClick={this.serchByType.bind(this, 4)}>彩妆/口红</div>
                <div className={(this.state.selectType == 5)?"divItemOver":"divItem"} onClick={this.serchByType.bind(this, 5)}>个人护理</div>
                <div className={(this.state.selectType == 6)?"divItemOver":"divItem"} onClick={this.serchByType.bind(this, 6)}>保健产品</div>
                <ul>
                  <li>
                    <span className="spanZheng"></span>
                  </li>
                  <li>
                    <span className="span30"></span>
                  </li>
                  <li>
                    <span className="spanSpeed"></span>
                  </li>
                </ul>
              </div>
            </div>
            <div style={{ position: 'relative', zIndex: 1, display: (this.state.isShowTypeList == false)?"block":"none"}}>
              <Carousel ref={slider => (this.slider = slider)} autoplay className="Carousel">
                {
                  this.state.carouselData.map((item, index) => {
                      return this.renderCarouselData(item, index);
                  })
                }
              </Carousel>
            </div>
            {divCarouselArrowLeft}
            {divCarouselArrowRight}

            <div className="divImageType" style={{display: (this.state.isShowTypeList == false)?"block":"none"}}>
              {
                this.state.typeData.map((item, index)=>{
                  return (<img key={index} src={"http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + item.pic} title={item.describe} onClick={this.gotoSearchType.bind(this, item.type)}/>)
                })
              }
              <div className="divPopularProduct">热门商品&nbsp;&nbsp;POPULAR PRODUCT</div>
            </div>
            <ul className="act_product_ul" style={{display: (this.state.isShowTypeList == false)?"block":"none"}}>
              {
                this.state.productList.map((item, index) => {
                  var productPic = null;
                  if(item.productPic == undefined){
                    productPic = <img src="/src/styles/images/listDefault_Large.png" />
                  }else {
                    productPic = <img src={"http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + item.productPic} />
                  }

                  return (<li className="pop_deal_single" key={index} onClick={this.gotoProductDetail.bind(this, item.id)}>
                    <div className="pic pic_hover">
                      {productPic}
                    </div>
                    <div className="pop_deal_content">
                      <p className="brand_name" title={item.productName + ((item.brandName)?"("+ item.brandName + ")":"")}>{item.productName + ((item.brandName)?"("+ item.brandName + ")":"")}</p>
                      <a href="http://item.jumei.com/df1804256771280p4229988.html?from=kdn_0321p_pos_1_11&amp;status=zs" target="_blank" className="name_box" height="35">
                        <span className="name" title={item.title}>{item.title}</span>
                        <span className="saleinfos"></span>
                      </a>
                      <a href="http://item.jumei.com/df1804256771280p4229988.html?from=kdn_0321p_pos_1_11&amp;status=zs" target="_blank" className="zhe_box">
                        <span className="num01">
                          <em>Rm</em>{item.discountPrice}</span><span className="num02">Rm{item.price}
                        </span>
                      </a>
                      <div className="divStock">{"库存：" + item.stock + "，浏览：" + item.browseNumbers}</div>
                    </div>
                  </li>);
                })
              }
            </ul>

            <div className="divImageType" style={{marginTop: '-47px', display: (this.state.isShowTypeList == false)?"flow-root":"none"}}>
              <div className="divPopularProduct" style={{marginBottom: '10px'}}>每日必看&nbsp;&nbsp;MUST CHECK OUT</div>
              {
                this.state.mustCheckOutList.map((item, index) => {
                  var productPic = null;
                  if(item.productPic == undefined){
                    productPic = <img className="all_cart_img" src="/src/styles/images/listDefault_Large.png"/>
                  }else {
                    productPic = <img className="all_cart_img" src={"http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + item.productPic} onClick={this.gotoProductDetail.bind(this, item.id)} />
                  }

                  return (<div className="today_tab_content" key={index}>
				              <a href="javascript:void(0)" className="today_tab_link">
                        {productPic}
					              <span className="today_rank_top_1"></span>
										  </a>
									    <a href="javascript:void(0)" className="global_tip" style={{display: 'block'}}>
					              <span>海外直采</span><span>海外价格</span><span>闪电发货</span>
				              </a>
									    <div className="deals_tags">
												<span className="tags_list tags_haitao">海淘</span>
										  </div>
				              <div className="products_detail">
					             <a href="javascript:void(0)" className="product_short_title">
											    <em>【官方授权】</em>{item.productName + "【" + item.brandName + "】" + " " + ((item.ingredients)?item.ingredients:"")}
                       </a>
					             <div className="product_price">
                         <div className="goto_cart_wrap all_cart_wrap">
                            <a className="goto_btn goto_cart all_cart" href="javascript:void(0)" onClick={this.gotoProductDetail.bind(this, item.id)}>加入购物车</a>
                         </div>
                         <span className="now_price"><em>Rm</em>{item.discountPrice}</span>
                         <div className="price_wrap">
                            <div className="icon_wrap"></div>
                              <span className="pass_price"><del>Rm{item.price}</del></span>
                            </div>
					               </div>
										</div>
                  </div>);
                })
              }
            </div>

            <div style={{marginTop: '-33px', display: (this.state.isShowTypeList == true)?"block":"none"}}>
                {serverList}
                <TableView ref="tableView" totalPageNum={this.totalPageNum.bind(this)}
                           isInternalRendering={false} getServiceData={this.getServiceData.bind(this)}
                           isService={true} serviceError={this.serviceError.bind(this)} searchObject={this.state.searchObject} pageNum={10}
                           url={this.state.findParents} method="post" headerToken="userAuth"/>

            </div>
            <Sidebar ref="sidebar"/>
            <BackTop/>

            <footer className="footer-4">
              <div className="divWidth">
                <div className="divTitle">
                  <div className="divAbout">购物指南</div>
                  <div className="divAbout" style={{marginLeft: '122px'}}>美丽阅读</div>
                  <div className="divAbout" style={{marginLeft: '94px'}}>产品概览</div>
                  <div className="divAbout" style={{marginLeft: '107px'}}>关于我们</div>
                </div>

                <div className="divMiddle">

                  <img src="/src/styles/images/frobalogo.png" onClick={this.bindFrobalogo.bind(this)} />
                  <ul>

                    <li><a href="javascript:void(0)" onClick={this.aHref.bind(this,0)}>成为会员</a></li>
                    <li><a href="javascript:void(0)" onClick={this.aHref.bind(this,6)}>我的账户</a></li>
                    <li><a href="javascript:void(0)" onClick={this.aHref.bind(this,7)}>正品保障</a></li>
                    <li><a href="javascript:void(0)" onClick={this.aHref.bind(this,1)}>订购服务</a></li>
                    <li><a href="javascript:void(0)" onClick={this.aHref.bind(this,2)}>国际配送</a></li>
                    <li><a href="javascript:void(0)" >帮助中心点</a></li>
                    <li><a href="javascript:void(0)" >特别通告</a></li>

                  </ul>
                  <ul>

                    <li><a href="javascript:void(0)" >阅读邮件</a></li>
                    <li><a href="javascript:void(0)" >Facebook</a></li>
                    <li><a href="javascript:void(0)" >YouTube</a></li>
                    <li><a href="javascript:void(0)" >Instagram</a></li>

                  </ul>
                  <ul>

                    <li><a href="javascript:void(0)" >推荐产品</a></li>
                    <li><a href="javascript:void(0)" >女孩护肤</a></li>
                    <li><a href="javascript:void(0)" >面膜</a></li>
                    <li><a href="javascript:void(0)" >彩妆/口红</a></li>
                    <li><a href="javascript:void(0)" >个人护肤</a></li>
                    <li><a href="javascript:void(0)" >保健产品</a></li>

                  </ul>
                  <ul style={{marginRight: '0px'}}>
                    <li><a href="javascript:void(0)" >关于 Froba 畐尔巴</a></li>
                    <li><a href="javascript:void(0)" onClick={this.aHref.bind(this,3)}>联络我们</a></li>
                    <li><a href="javascript:void(0)" onClick={this.aHref.bind(this,4)}>商务合作</a></li>
                    <li><a href="javascript:void(0)" onClick={this.aHref.bind(this,5)}>网站地图</a></li>
                  </ul>
                </div>
                  <div className=" div-foot-box" style={{display:this.state.displayInformation}}>

                      <div className="div-title">
                          {this.state.aHrefTitle}
                      </div>

                      <div className="div-word">
                          {this.state.aHrefInformation}
                      </div>
                  </div>


                  <div className=" div-foot-contect" style={{display:this.state.displayContact,marginBottom:"20px"}}>

                      <div className="div-title">
                          联系我们
                      </div>
                      <div className="div-word">
                          contact us
                      </div>

                      <div> <span style={{color:"red"}}>*</span>您的姓名：</div>
                      <Input placeholder="Your Name" />
                      <div> <span style={{color:"red"}}>*</span>邮箱地址：</div>
                      <Input placeholder="Email" />
                      <div> <span style={{color:"red"}}>*</span>咨询内容：</div>
                      <TextArea rows={4} />

                       <div style={{marginTop:"20px",marginBottom:"20px"}}>
                           <Button type="primary">提交</Button>
                       </div>

                  </div>
                <div className="divDeliveryPartner">
                  <div className="divTitle1">购物网配送方式 Delivery Partner</div>
                  <div>
                    <img src="/src/styles/images/about/poslaju.png" />
                    <img src="/src/styles/images/about/gdex.png" />
                    <img src="/src/styles/images/about/skynet.png" />
                    <img src="/src/styles/images/about/abx-express.png" />
                    <img src="/src/styles/images/about/frobagroup-delivery.png" />
                  </div>
                  <div className="divFloatRight" style={{marginRight: '16px'}}>
                    <img src="/src/styles/images/about/wotrus.png" />
                    <img src="/src/styles/images/about/ssl-secure.png" />
                    <img src="/src/styles/images/about/ssl-secure-transaction.png" />
                  </div>
                </div>

                <div className="divDeliveryPartner">
                  <div className="divTitle1">购物网付款方式 Payment Support</div>
                  <div>
                    <img src="/src/styles/images/about/visa-straight-32px.png" />
                    <img src="/src/styles/images/about/paypal-straight-32px.png" />
                    <img src="/src/styles/images/about/maestro-straight-32px.png" />
                    <img src="/src/styles/images/about/mastercard-straight-32px.png" />
                    <img src="/src/styles/images/about/american-express-straight-32px.png" />
                    <img src="/src/styles/images/about/maybank.png" />
                    <img src="/src/styles/images/about/cimb-bank.png" />
                    <img src="/src/styles/images/about/american-express-straight-32px.png" />
                  </div>

                  <div className="divFloatRight" style={{marginTop: '-61px'}}>
                    <div className="divTitle1">官方社群 Stay Connected</div>
                    <p className="social">
    					<i className="fa fa-facebook"></i>
    					<i className="fa fa-twitter"></i>
    					<i className="fa fa-google"></i>
    					<i className="fa fa-instagram"></i>
    					<i className="fa fa-pinterest"></i>
    					<i className="fa fa-tumblr"></i>
    				</p>
                  </div>
                </div>

                <div className="divCenter">
                  <span style={{marginRight: '8px'}}>2017 Copyright Frobagroup.com. All Rights Reserved. 版权所有</span>
                  <span className="spanBlod">Terms & Conditions  Privacy Policy  Cookie Statement</span>
                </div>

              </div>
        		</footer>
          </div>
      )
    }
}
